<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }
            .last {
                color: #0000ff;
                background: #dfdfdf;
            }

            section {
                height: 300px;
                text-align: center;
                font-size: 100px;
                line-height: 300px;
            }

            section:nth-of-type(2n) {
                background: #dfdfdf;
            }

            section:nth-of-type(2n+1) {
                background: #ffff00;
            }

            .chat {
                position: fixed;
                right: 10px;
                top: 30vh;
                width: 150px;
                height: 40vh;
                border: 1px solid red;
                background: rgba(200, 200, 200, 0.5);
            }
        </style>
    </head>
    <body>

        <h3>固定定位</h3>
        <p>当元素的定位方式为`fixed`时即为固定定位</p>
        <p>元素会相对于浏览器窗口进行定位</p>

        <div class="chat">Can we chat?</div>

        <div class="last">阿芳是个好姑娘</div>

        <script type="text/javascript">
            const b = document.body;
            for( let i = 1; i <= 100; i++ ){
                // 创建一个新的元素
                let e = document.createElement('section');
                // 将 i 的值添加到 新创建的元素中
                e.innerHTML = i ;
                // 将新创建的元素追加到 body 内部末尾
                b.appendChild(e);
            }
        </script>

    </body>
</html>